<template>
  <page-header-wrapper :title="false">
    <a-card title="问题微信">
      <s-table
        bordered
        ref="table"
        :row-key="(record) => record.id"
        :columns="badColumns"
        :data="badData"
      >
        <template slot="image2" slot-scope="text, record">
          <a @click="handlePreview(record.image2)">
            <img :src="record.image2" width="30" height="30" />
          </a>
        </template>
        <template slot="image" slot-scope="text, record">
          <a @click="handlePreview(record.image)">
            <img :src="record.image" width="30" height="30" />
          </a>
        </template>
        <template slot="action" slot-scope="text,record">
          <a-badge :dot="record.is_read == 0">
            <a-button v-if="record.is_read == 0" size="small" type="primary" @click="getRes(record.id)">查收</a-button>
            <a-button v-if="record.is_read == 1" size="small" disabled type="primary">已查收</a-button>
          </a-badge>
        </template>
      </s-table>
    </a-card>
    <a-modal v-model="previewVisible" :footer="null" @cancel="handleCancel0">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import { STable } from '@/components'
  import col from '@/columns/wechat'
  import { getStatusList, getIsRead } from '@/api/wechat'

  export default {
    components: {
      STable
    },
    name: 'BadWx',
    data () {
      return {
        badColumns: col.bad,
        badData: parameters => {
          return getStatusList(Object.assign(parameters, this.queryParam)).then(res => {
            return res.result
          })
        },
        queryParam: {},
        visible: false,
        previewVisible: false,
        previewImage: ''
      }
    },
    created () {
      this.queryParam['filter[type]'] = '1'
    },
    methods: {
      async handlePreview (file) {
        const app = this
        app.previewImage = file
        app.previewVisible = true
      },
      handleCancel0 ({ fileList }) {
        this.fileList = fileList
      },
      getRes (id) {
        getIsRead(id).then(res => {
          if (res.status === 0) {
            this.$refs.table.refresh(true)
          } else {
            this.$warning({
              title: res.msg
            })
          }
        })
      }
    }
  }
</script>

<style>
  .ant-table-tbody > tr.table-color-dust {
    background-color: #ffcccc;
  }
</style>
